const path = require('path');

/**
 * 这是一个演示 webpack 原理的配置文件
 */
module.exports={
	entry:"./src/index.js", // 入口文件：这里汇总各个程序模块，并把它们提供给外部，比如浏览器使用。即设置为:windows["xxxx"]=xxxx 的形式。
	mode:"development",// 开发模式
	devtool:"source-map", // 输入soucemap 文件用于方便错误调试。
	output:{
		path: path.resolve(__dirname,"dist"),// 打包后的文件的保存位置。
		filename: 'my-first-webpack.bundle.js',
		// 对于html 这种含有：对第三方文件有引用复合文件，比如一个标签：<img src="./imgs/avatar.jpg">
		// webpack 自动调用url-loader 对其进行数据处理。结果就是把 "./imgs/avatar.jpg" 转变成一个:
		// 类似于：0b4a1ea74e05c33e1ae6e43f3a64047d.jpg 这样的文件名。由于"./imgs/avatar.jpg" 是相对于
		// 源文件的路径：即打包数时候的文件路径。在具体引用的使用的需要，需设置一个根路径即：打包后的图片文件
		// 0b4a1ea74e05c33e1ae6e43f3a64047d.jpg 的存放路径。即 实际部署时候的资源文件的根路径。由于 
		// webpack（其实是url-loader） 会把 资源文件 即 img:src 的文件打包到 output的path位置。所以这里
		// 就把ublicPath设置为 "dist/",注意后缀："/"不能生，因为：publicPath 是作为：__webpack_require__.p
		// 的属性引入 模块的导出文件的：
		// "./src/imgs/avatar.jpg": (function(module, exports, __webpack_require__) {
		// 		module.exports = __webpack_require__.p + "0b4a1ea74e05c33e1ae6e43f3a64047d.jpg";
		// });由此可见一个 ./src/imgs/avatar.jpg 是作为一个单独的模块来进行使用的。
		publicPath:'dist/' 
	},
	module:{// 加载的处理模块模块的功能组件。
		rules:[
			// 注意这里需要 npm install html-loader,会把 对html 的require 转变成 exports= html文件定义字符串;
			// 这里隐含有一个 url-loader,用于文件引用。
			{test:/\.html$/,use:{loader:"html-loader", // html 的文件处理
				options:{attrs:[':data-src',"img:src"]}}},// attrs:是一种{标签:属性}格式，表示对标签的中属性采用url-loader
			{test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,loader: 'url-loader',options: {limit: 1000}},// 图片资源文件的处理。
			{test:/\.css$/,loader:['style-loader', 'css-loader']} // css 文件的处理。
		]// rules
	}// module
}